<template>
  <view>
    <!-- 搜索，展示数据 -->
    <uni-search-bar @confirm="search" @input="input"></uni-search-bar>
    <view>
      <Item :list="uselist"></Item>
    </view>
    <view class="none" v-if="flag"> 暂无搜索内容 </view>
  </view>
</template>
<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
import uniSearchBar from "@/components/uni-search-bar/uni-search-bar.vue";
import Item from "./Item";
import data from "./index.json";
export default {
  components: { uniNavBar, uniSearchBar, Item },
  onLoad: function () {
    this.list = data;
    this.uselist = data;
  },
  watch: {
    uselist(a) {
      console.log(a, "数据");
      uni.setStorageSync("uselist", JSON.stringify(a));
    },
  },
  data() {
    return {
      list: [],
      uselist: [],
      flag: false,
    };
  },
  methods: {
    search(a) {
      this.uselist = [];
      let list = [];
      this.list.forEach((item) => {
        if (item.question.includes(a.value) || item.title.includes(a.value)) {
          list.push(item);
        }
      });
      if (list.length <= 0) {
        this.flag = true;
      } else {
        this.flag = false;
        this.uselist = list;
      }
    },
    input(a) {
      if (a.value.length == 0) {
        this.flag = false;
        this.uselist = this.list;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.none {
  width: 100%;
  height: 300upx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>